<template>
  <div class="person">
    <h1>情况一：监视 [ref] 定义的 [基本类型]</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我+1</button>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue"

let sum = ref(0)
function changeSum() {
  sum.value += 1
}

//情况一：监视 [ref] 定义的 [基本类型]
// watch(sum, (newVal, oldVal) => {
//   console.log('sum变化了', newVal, oldVal);
// })

//停止监视
const stopWatch = watch(sum, (newVal, oldVal) => {
  console.log('sum变化了', newVal, oldVal);
  if(sum.value > 10){
    stopWatch();
  }
})




</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
